<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml" lang="ch">
<head>
    <meta charset="UTF-8">
    <title>二手商城</title>

    <script src="../../static/js/axios-0.18.0.js"></script>
    <script src="../../static/plugins/echarts/echarts.js"></script>
    <script src="../../static/js/vue.js"></script>
    <link href="../../static/css/style.css" rel="stylesheet">
    <link href="../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.js"></script>
    <style>
        .el-header {
            background-color: #ffffff;
            text-align: center;
            line-height: 80px;
            padding-top: 10px;
        }

        a:link {
            text-decoration: none;
            color: #53a100;
        }

        a:visited {
            text-decoration: none;
            color: #4cae4c;
        }

        a:hover {
            text-decoration: none;
            color: #82fa1b;
        }

        a:active {
            text-decoration: none;
            color: #015306;
        }

        a {
            font-size: 20px;
        }

        .imputStyle {
            padding-top: 9px;
            text-align: center;
            height: 4rem;
            border: 1px solid #4cae4c;
            line-height: 48px;
            border-radius: 20px;
            outline: none;
            font-size: 15px;
        }

        .ps-badge {
            display: inline-block;
            position: absolute;
            margin-top: 0;
            margin-left: 0;
            width: 80px;
            height: 35px;
            z-index: 10;
            background-color: #e36401;
        }

        .ps-badge > span {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            font-family: "Montserrat", sans-serif;
            font-size: 16px;
            font-weight: 500;
            color: #efefef;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-main {
            color: #333;
            text-align: center;
            height: auto;
            margin: 0px;
            padding: 0px;
            width: 100%;
        }
    </style>
</head>
<body style="width: 100%;margin: 0px;padding: 0px;">
<div id="app">
    <div class="el-header">
        <el-col :span="8">
            <div class="grid-content bg-purple" style="float: left">
                <a href="/"><img height="70px" width="200px" src="../../static/pic/logo.jpg"/></a>
            </div>
        </el-col>
        <el-col :span="7">
            <div class="grid-content bg-purple">
                <el-menu class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="1"><a href="/" style="color: #4cae4c">首页</a>
                    </el-menu-item>
                    <el-menu-item index="2"><a href="/commolist/commolist" style="color: #4cae4c">二手商品</a>
                    </el-menu-item>
                    <el-menu-item index="3"><a href="/commolist/news" style="color: #4cae4c">网站公告</a>
                    </el-menu-item>
                    <el-menu-item index="4"><a href="/commolist/feedback" style="color: #4cae4c">联系我们</a>
                    </el-menu-item>
                </el-menu>
            </div>
        </el-col>
        <el-col :span="4">
            <div style="">
                <input @keyup.enter="findall" class="imputStyle" v-model="findmess" placeholder="请输入..."/>
            </div>
        </el-col>
        <el-col :span="5">
            <div class="grid-content bg-purple-light right" style="float: right" v-if="islogin">
                <el-menu class="el-menu-demo" mode="horizontal">
                    <el-submenu>
                        <template slot="title">
                            <el-avatar
                                    :src="userimage"></el-avatar>
                            {{username}}
                        </template>
                        <a href="/user/centre" target="_blank">
                            <el-menu-item index="2-1">个人中心</el-menu-item>
                        </a>
                        <el-menu-item index="2-3" @click="quit">退出</el-menu-item>
                    </el-submenu>
                </el-menu>

            </div>
            <div class="el-menu-demo" style="float: right; text-align: center" v-else>
                <a href="/login">登陆&注册</a>
            </div>
        </el-col>
    </div>
    <div style="height: 10px;background-color: #ffffff"></div>
    <div style="width: 100%;height: 30px;margin-top: 80px">
        <div style="width: 100%;height: 50px;">
            <el-divider></el-divider>
        </div>
    </div>
    <div id="leftcaozuo" style="width: 100%;height: auto;padding-top: 20px">
        <template>
            <div style="margin-top: 20px;padding-left: 100px;width: 250px;height: auto;float: left">
                <span style="font-size: 30px;color: #06af37;">商品类别</span>
                <div style="height: 20px"></div>
                <el-radio-group v-model="category" size="medium" @change="findall()">
                    <el-radio label="" border>全部</el-radio>
                    <br/>
                    <el-radio label="电子数码" border>数码</el-radio>
                    <br/>
                    <el-radio label="图书" border>图书</el-radio>
                    <br/>
                    <el-radio label="旅游" border>旅游</el-radio>
                    <br/>
                    <el-radio label="生活" border>生活</el-radio>
                    <br/>
                    <el-radio label="服装" border>服装</el-radio>
                    <br/>
                    <el-radio label="化妆" border>化妆</el-radio>
                    <br/>
                    <el-radio label="其他" border>其他</el-radio>
                    <br/>
                </el-radio-group>
                <template>
                    <div class="block" style="width: 220px">
                        <div style="font-size: 25px;color: #06af37;">价格区间</div>
                        <el-slider
                                v-model="price"
                                range
                                @change="findall"
                                :max="10000">
                        </el-slider>
                    </div>
                    <div class="block" style="width: 200px">
                        <el-col :span="11">
                            <el-input
                                    @change="findall"
                                    placeholder="最低价"
                                    v-model="price[0]"
                                    size="small"
                                    width="100px"
                                    clearable>
                            </el-input>
                        </el-col>
                        <el-col :span="2">
                            <i class="el-icon-minus"></i>
                        </el-col>
                        <el-col :span="11">
                            <el-input
                                    @change="findall"
                                    placeholder="最高价"
                                    v-model="price[1]"
                                    size="small"
                                    width="100px"
                                    clearable>
                            </el-input>
                        </el-col>
                    </div>
                </template>
            </div>
            <!--商品-->
            <div id="two" style="height: auto;width:1500px;padding-left: 100px;padding-top: 20px;float: left">
                <div style="height: auto;">
                    <template>
                        <h4 class="el-icon-help">价格</h4>
                        <el-select placeholder="默认" v-model="findstatus" @change="findall()">
                            <el-option key="1" label="默认" value="0"></el-option>
                            <el-option key="2" label="从低到高" value="1"></el-option>
                            <el-option key="3" label="从高到低" value="2"></el-option>
                        </el-select>
                    </template>
                </div>
                <div style="width: 100%; margin: 0 auto; padding-top: 20px;padding-right: 100px">
                    <template>
                        <el-row :gutter="20">
                            <el-col :span="6" v-for="item in dataList" :key="item.id" id="commo">
                                <div @click="detail(item.commid)" v-loading.fullscreen.lock="fullscreenLoading"
                                     class="demo-image__placeholder" style="padding-top: 30px;margin-right: 20px;">
                                    <div class="block" style="width: 250px;height: 350px; padding-left: 20px;">
                                        <img :src="item.image" style="width: 250px;height: 300px"/><br/>
                                        <el-tooltip class="item" effect="light" :content="item.commname"
                                                    placement="top-start"
                                                    style="width: 250px">
                                            <span>{{item.commname.substring(0, 16)}}...</span>
                                        </el-tooltip>
                                        </br>
                                        <span style="color: #4cae4c;font-size: 20px">￥{{item.thinkmoney}}</span>
                                        <span style="color: #5e5e5e;font-size: 10px;text-decoration:line-through;">原价{{item.orimoney}}</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </template>
                    <!--分页-->
                    <div class="pagination-container">
                        <el-pagination
                                class="pagiantion"
                                @current-change="handleCurrentChange"
                                :current-page="pagination.currentPage"
                                :page-size="pagination.pageSize"
                                layout="total, prev, pager, next, jumper"
                                :total="pagination.total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </template>
    </div>

    <div style="height: 30px;background-color: #ffffff"></div>
    <div style="height: 30px;background-color: #ffffff"></div>
    <div style="height: 30px;color: white"></div>
    <!--最底部-->
    <div style="width: 100%;height: auto;background-color: #222222;margin-top: 1600px">
        <div class="ps-footer__content">
            <div class="ps-container">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--info">
                            <header><a class="ps-logo" href="/"><img src="../../static/pic/logo.jpg"
                                                                     alt=""></a>
                                <h3 class="ps-widget__title">Address Office 1</h3>
                            </header>
                            <footer>
                                <p><strong>460 West 34th Street, 15th floor, New York</strong></p>
                                <p>Email: <a href='mailto:support@store.com'>nanyangligong@nyist.com</a></p>
                                <p>Phone: +323 32434 5334</p>
                                <p>Fax: ++323 32434 5333</p>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--info second">
                            <header>
                                <h3 class="ps-widget__title">Address Office 2</h3>
                            </header>
                            <footer>
                                <p><strong>PO Box 16122 Collins Victoria 3000 Australia</strong></p>
                                <p>Email: <a href='mailto:support@store.com'>nanyangligong@nyist.com</a></p>
                                <p>Phone: +323 32434 5334</p>
                                <p>Fax: ++323 32434 5333</p>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--link">
                            <header>
                                <h3 class="ps-widget__title">Find Our store</h3>
                            </header>
                            <footer>
                                <ul class="ps-list--link">
                                    <li><a href="#">Coupon Code</a></li>
                                    <li><a href="#">SignUp For Email</a></li>
                                    <li><a href="#">Site Feedback</a></li>
                                    <li><a href="#">Careers</a></li>
                                </ul>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--link">
                            <header>
                                <h3 class="ps-widget__title">Get Help</h3>
                            </header>
                            <footer>
                                <ul class="ps-list--line">
                                    <li><a href="#">Order Status</a></li>
                                    <li><a href="#">Shipping and Delivery</a></li>
                                    <li><a href="#">Returns</a></li>
                                    <li><a href="#">Payment Options</a></li>
                                    <li><a href="#">Contact Us</a></li>
                                </ul>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--link">
                            <header>
                                <h3 class="ps-widget__title">Products</h3>
                            </header>
                            <footer>
                                <ul class="ps-list--line">
                                    <li><a href="#">Shoes</a></li>
                                    <li><a href="#">Clothing</a></li>
                                    <li><a href="#">Accessries</a></li>
                                    <li><a href="#">Football Boots</a></li>
                                </ul>
                            </footer>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--回到最顶部-->
    <el-backtop>
        <div style="{
                    height: 100%;
                    width: 100%;
                    background-color: #f2f5f6;
                    box-shadow: 0 0 6px rgba(0,0,0, .12);
                    text-align: center;
                    line-height: 40px;
                    color: #4cae4c;}">
            <i class="el-icon-caret-top"></i>
            UP
        </div>
    </el-backtop>
</div>

</body>
<script th:inline="javascript">
    var inputString = [[${inputString}]];
</script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            price:[0,10000],
            category: "",
            findstatus: "",//""默认排序，1从低到高，2从高到低
            islogin: false,
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 16,//每页显示的记录数
                total: 0,//总记录数
                queryString: null//查询条件
            },
            findmess: inputString,
            fullscreenLoading: false,
            username: "",
            userimage: "",
            fit: "cover",
            dataList: [],
        },
        created() {
            //判断是否登陆
            this.getname();
            this.findall();
        },
        methods: {
            handleCurrentChange(currentPage){
                //页面更改时，再次请求数据
                this.pagination.currentPage = currentPage;
                this.findall();
                this.goPost();
            },
            findall() {
                var page = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.findmess
                };
                var leibie = this.category;
                var paixu = this.findstatus;
                axios.post("/commodity/findAllByAll?category=" + leibie + "&paixu=" + paixu + "&minprice=" + this.price[0] + "&maxprice="+ this.price[1], page).then((res) => {
                    this.pagination.total = res.data.total;
                    this.dataList = res.data.rows;
                }).catch(() => {
                    this.$message.error("网络错误");
                })
            },
            //回到最顶端
            goPost () {
                let distance = document.documentElement.scrollTop || document.body.scrollTop; //获得当前高度
                let step = distance / 30; //每步的距离
                (function jump() {
                    if (distance > 0) {
                        distance -= step;
                        window.scrollTo(0, distance);
                        setTimeout(jump, 10);
                    }
                })();
            },
            getname() {
                //获取用户信息
                axios.post("/user/getusermess").then((res) => {
                    this.islogin = res.data.flag;
                    if (this.islogin) {
                        this.username = res.data.data.username;
                        this.userimage = res.data.data.uimage;
                    }
                })
            },
            //退出
            quit() {
                axios.post("/user/quit").then((res) => {
                    this.$message.success(res.data.message);
                    //跳转页面
                    this.fullscreenLoading = true;
                    setTimeout(() => {
                        this.fullscreenLoading = false;
                        location.href = "/";
                    }, 2000);
                }).catch(() => {
                    this.$message.error("退出失败");
                })
            },
            //跳转详情
            detail(commid) {
                //跳转页面
                window.open("/commodity/detail/" + commid, '_blank');
            }
        },

    })
</script>
</html>